import React, { useState } from 'react'
import './App.css';
/**
 * 
 * 官方定义高阶组件（HOC）是 React 中用于**复用组件逻辑**的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
   HOC 是单词 Heigher Order Component 缩写
   具体而言，高阶组件是参数为组件，返回值为新组件的函数。
 * 
 * 
 */

function HelloComponent(props) {
  return (
    <div>
      <h2>我是一个定义的函数式组件 <span style={{ fontSize: '20px', color: '#f40' }}>{props.title}</span> </h2>
    </div>
  )
}

// 高阶组件就是一个函数,接收一个组件,返回一个[新]的组件.
const withComponent = (Component) => {
  return function WrapperComponent() {
    const [title, setTitle] = useState('这是由内部组件 WrapperComponent 传递过来的 title')
    const changeTitle = () => {
      setTitle("这是新的 title")
    }
    return (
      <React.Fragment>
        <Component title={title} />
        <button onClick={changeTitle}>修改 title</button>
      </React.Fragment>
    )
  }
}

// 传入一个HelloComponent,作为入参
// 返回一个HocComponent作为新的组件
const HocComponent = withComponent(HelloComponent)

function App() {
  return (
    <div className="App">
      <h2>Hello HOC - Highter Order Component</h2>
      <HocComponent />
    </div>
  );
}
export default App;
